<!DOCTYPE html>  
<html>  
<head> 
    <style>  
        @font-face {  
            font-family: 'JetBrains Mono';  
            src: url('JetBrainsMono.woff2') format('woff2');  
        }  
        body {  
            font-family: 'JetBrains Mono', sans-serif;  
        }  
                button {
            margin-right: 15px;
            /* 添加右边距 */
            font-family: 'JetBrains Mono', 'HarmonyOS Sans SC', 'Microsoft YaHei UI'
        }
        
        .header {
      position: fixed;
      top: 10;
      left: 10;
      background-color: #3498db;
      padding: 10px;
      text-align: center;
      border-radius: 10px;
      display: flex;
      align-items: center; /* 垂直居中 */
    }

    .button-container {
      display: flex;
      align-items: center; /* 垂直居中 */
    }

    .button {
      background-color: #3498db;
      color: white;
      padding: 8px 16px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .separator {
      height: 20px; /* 设置竖线高度 */
      width: 1px; /* 设置竖线宽度 */
      background-color: white; /* 设置竖线颜色 */
      margin: 0 10px; /* 设置竖线两侧的间距，可根据需要调整 */
    }
    .powered-by {
            position: absolute;
            top: 10px;
            /* 距离顶部的距离 */
            right: 10px;
            /* 距离右侧的距离 */
            color: gray;
            /* 文字颜色 */
            font-size: 12px;
            /* 文字大小 */
        }

        .made-by {
            position: absolute;
            top: 30px;
            /* 距离顶部的距离 */
            right: 10px;
            /* 距离右侧的距离 */
            color: gray;
            /* 文字颜色 */
            font-size: 12px;
            /* 文字大小 */
        }

    #myButton {
      display: inline;
      animation: colorChange 10s infinite; /* 调整动画时长 */
    }
    @keyframes colorChange {
      0% {
        color: red; /* 开始颜色 */
      }
      10% {
        color: orange; /* 中间颜色1 */
      }
      20% {
        color: yellow; /* 中间颜色2 */
      }
      30% {
        color: green; /* 中间颜色3 */
      }
      40% {
        color: cyan; /* 中间颜色4 */
      }
      50% {
        color: blue; /* 中间颜色5 */
      }
      60% {
        color: purple; /* 中间颜色6 */
      }
      70% {
        color: pink; /* 中间颜色7 */
      }
      80% {
        color: brown; /* 中间颜色8 */
      }
      90% {
        color: gray; /* 中间颜色9 */
      }
      100% {
        color: red; /* 结束颜色，与开始颜色相同，形成循环 */
      }
    }
    </style>      
    <title>PCL 2 主页文件</title>  
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>  
<body>
    <div class="powered-by">Powered by Vercel</div>
    <div class="made-by">Made by Ad_closeNN</div>
      </div>
    <br><br><br>
    <h1 style="font-size:50px;" id="myButton">欢迎使用由 Ad_closeNN 制作的 PCL 2 主页文件！</h1>
    <br><br>
    <button style="font-size:25px;display:inline-block" type="button" onclick="window.open('https://ad-closenn.github.io/aft/Custom.xaml')">下载最新的版本</button><button style="font-size:25px;display:inline-block" type="button" onclick="window.open('https://github.com/ad-closenn/pcl2-home-page/releases/latest')">GitHub 更新说明</button>

 <footer>  
    <div style="text-align:center;"> <p>Copyright © Ad_closeNN 2024-present. All Rights Reserved.</p></div>
 </footer>  
</body>  
</html>
